<template>
    <div class="container">
        <div class="header">
            <div class="title">图书列表</div>
        </div>
        <div>
            <el-form :model="photo_form" :rules="photo_rules" ref="photo_form" label-width="100px">
                <el-form-item label="照片名称：" prop="name">
                    <el-input v-model="photo_form.name"></el-input>
                </el-form-item>
                <el-form-item label="上传方式：" prop="type">
                    <el-radio-group v-model="photo_form.type">
                        <el-radio v-model="photo_form.type" label="0">七牛云</el-radio>
                        <el-radio v-model="photo_form.type" label="1">阿里oss</el-radio>
                        <el-radio v-model="photo_form.type" label="2">服务器</el-radio>

                    </el-radio-group>
                </el-form-item>

                <el-form-item label="选择照片：">
                    <el-upload class="upload-demo" action="https://upload.qiniup.com" :on-remove="handleRemove"
                        :file-list="file_list" list-type="picture" :http-request="customUpload"
                        accept="image/jpeg,image/gif,image/png" :limit="1">
                        <el-button size="small" type="primary">点击上传{{photo_form.file_list}}</el-button>
                        <div slot="tip" class="el-upload__tip">一次只能上传一张jpg/png/gif的照片，且不超过2M</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input type="textarea" v-model="photo_form.remark"></el-input>
                  </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('photo_form')">立即上传</el-button>
                    <el-button @click="resetForm('photo_form')">重置</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>
<script>
import { qiniuTonken } from "@/js/qiniu_token"
import { addPhoto } from "@/js/api/photo/photo"
import alter from '@/js/axios'
export default {
    name: "photoAdd",
    data() {
        return {
            photo_form: {
                name: "",
                type: "",
                url:"",
                remark:""
            },
            photo_rules: {
                name: [
                    { required: true, message: '请输入照片名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择上传方式', trigger: 'change' }
                ],
            },
            file_list: [],

        }
    },
    created() {
        this.getQiniuToken()
    },
    methods: {
        getQiniuToken() {
            qiniuTonken().then(res => {
                this.yourQiniuUploadToken = res.data.data
            })
        },
        handleRemove(file, fileList) {
            this.file_list = []
            this.photo_form.url = ""
            console.log(file, fileList);
        },
        beforeUpload(file) {
            // 在上传之前的逻辑，可以做一些检查或者其他处理
            return true; // 返回true允许上传，返回false阻止上传
        },
        customUpload(file) {
            const qiniu = require('qiniu-js');

            // 自定义上传方法，使用qiniu-js库进行上传
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const directory = 'sm-frontend/' + year + '/' + month + '/';

            const fileName = file.file.name;
            const key = directory + fileName;

            const observable = qiniu.upload(file.file, key, this.yourQiniuUploadToken);

            const _this = this
            return observable.subscribe({
                complete(res) {
                    // 上传完成时的回调
                    const imageUrls = 'http://qiniuyun.zfc.life/' + res.key
                    const file_data = {
                        name: fileName,
                        url: imageUrls,
                    }
                    _this.photo_form.url = imageUrls
                    _this.file_list.push(file_data)

                },
                next(res) {
                    // 上传过程中的回调，如果需要可以在这里处理上传进度等信息
                },
                error(err) {
                    // 上传出错时的回调
                },
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.photo_form.file_list == ""){
                        alter.errorMessage("请选择照片后上传！！！")
                        return
                    }
                    console.log(this.photo_form)
                    addPhoto(this.photo_form).then(res=>{
                        alter.successMessage(res)
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style>
.container {
    padding: 0 30px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: 500;
}
</style>
